<!--  -->
<template>
  <div style="background-color: #efefef;margin-bottom: 1.2rem">
    <div class="biueTopTitle">
      协同创新特色数据库
    </div>
    <!--    搜索框1-->

      <div>
        <van-search v-model="value" placeholder="请输入搜索关键词"  @focus="tosearch"   />
      </div>

    <!--    nav 5个lists-->
    <div class="nav-list">
      <div class="navImgList-flex">
        <div v-for="(item) in navImgList" :key="item.name"  @click="goMorn(item.name,item.code)">
          <img :src="item.img" class="imglist">
          <div>{{ item.name }}</div>
        </div>
      </div>
    </div>

    <!--       第1部分  中央精神-->

    <div class="bgcol">
      <div class="box">
        <!--      第一部分  小标题-->
        <div class="smTitle">
          <div class="blueLion"></div>
          <div class="smTitleText">中央精神</div>
          <div class="smTitleTextBlue" @click="goMorn('中央精神','ca101')">更多</div>
          <div>
            <van-icon name="arrow"/>
          </div>
        </div>
        <!--        小标题下第一个内容-->
        <van-skeleton title  :row="3" :loading="toploading">
         <!-- <div class="top1Box-flex" v-for="(item , index) in top1 " :key="index">
           <div class="top1img-box">
            <img :src="item.coverPicMydxSpider">
          </div>
          <div>
            <div class="top1title-text">
              {{ item.title }}
            </div>
            <div class="top1smtext">
              <van-row>

                <van-col span="7">{{ item.pushDate|datetimeshort }}</van-col>
                   <van-col span="8">{{ item.dataSource }}</van-col>

                <van-col span="8" :offset="3">{{ item.author }}</van-col>
              </van-row>
            </div>
          </div> 
          
        </div>  -->

        <ArticleItem v-for="(item , index) in top1 " :key="index"  :article="item">
          </ArticleItem>
        </van-skeleton>
      </div>
    </div>

    <!--       第二部分  历史演进 -->
    <div class="bgcol1">
      <div class="box">
        <!--      小标题-->
        <div class="smTitle">
          <div class="blueLion"></div>
          <div class="smTitleText">历史演进</div>
          <div class="smTitleTextBlue" @click="goMorn('历史演进','ca102')">更多</div>
          <div>
            <van-icon name="arrow"/>
          </div>
        </div>
        <!--        小标题下第一个内容-->
        <div class="top2Box-flex" v-for="(item , index) in top2" :key="index">
          <!--          <div class="top1img-box">-->
          <!--            <img :src="item.img" >-->
          <!--          </div>-->
          <van-skeleton title  :row="2" :loading="top2loading">
          <div>
            <div class="top2title-text" @click="godetail(item)">
              {{ item.title }}
            </div>
            <div class="top2smtext">
              <van-row>
                <!-- <van-col span="4">发表时间:</van-col> -->
                
                <van-col span="6">{{ item.pushDate }}</van-col>
                 <van-col span="4">{{ item.dataSource }}</van-col>
                <!-- <van-col span="3" :offset="3">作者:</van-col> -->
                <van-col span="7">{{ item.author }}</van-col>
              </van-row>
            </div>
          </div>
          <div class="top2lion">
          </div>
          </van-skeleton>
        </div>
      </div>
    </div>

    <!--       第3部分  国内动态 -->
    <div class="bgcol1">
      <div class="box">
        <!--        小标题-->
        <div class="smTitle">
          <div class="blueLion"></div>
          <div class="smTitleText">国内动态</div>
          <div class="smTitleTextBlue"  @click="goMorn('国内动态','ca103')">更多</div>
          <div>
            <van-icon name="arrow"/>
          </div>
        </div>
        <!--        小标题下第一个内容-->

        <div class="top2Box-flex" v-for="(item , index) in top3" :key="index">
          <!--          <div class="top1img-box">-->
          <!--            <img :src="item.img" >-->
          <!--          </div>-->
          <van-skeleton title  :row="2" :loading="top3loading">
          <div>
            <div class="top2title-text" @click="godetail(item)">
              {{ item.title }}
            </div>
            <div class="top2smtext">
              <van-row>
                <van-col span="6">{{ item.pushDate }}</van-col>
                <van-col span="4">{{ item.dataSource }}</van-col>
                <!-- <van-col span="3" :offset="3">作者:</van-col> -->
                <van-col span="7">{{ item.author }}</van-col>
              </van-row>
            </div>
          </div>
          <div class="top2lion">
          </div>
          </van-skeleton>
        </div>
      </div>
    </div>


    <!--       第四部分  绵阳实践 -->
    <div class="bgcol1">
      <div class="box">
        <!--        小标题-->
        <div class="smTitle">
          <div class="blueLion"></div>
          <div class="smTitleText">绵阳实践</div>
          <div class="smTitleTextBlue"  @click="goMorn('绵阳实践','ca104')">更多</div>
          <div>
            <van-icon name="arrow"/>
          </div>
        </div>
        <div class="imgList-flex">
          <div >
            <div v-for="(item,index) in ImgList" :key="index" @click="goMorn('绵阳实践','ca104')">
              <img :src="item.img" class="ImgList">
              <div class="ImgListbox">
                {{item.name}}
              </div>
            </div>
          </div>
          <div >
            <div v-for="(item,index) in smImgList" :key="index" @click="goMorn('绵阳实践','ca104')">
              <img :src="item.img" class="smImgList">
              <div  class="ImgListbox">
                {{item.name}}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--       第5部分  国际视野 -->
    <div class="bgcol1">
      <div class="box">
        <!--        小标题-->
        <div class="smTitle">
          <div class="blueLion"></div>
          <div class="smTitleText">国际视野</div>
          <div class="smTitleTextBlue"  @click="goMorn('国际视野','ca105')">更多</div>
          <div>
            <van-icon name="arrow"/>
          </div>
        </div>
        <div>
          <van-row>
            <van-col span="6" :offset="6" @click="top5btn(0)"  :class="top5btns === 0 ? 'top5color' : ''">
              <van-icon name="bars" />
              <span>国外实践动态</span>
            </van-col>
            <van-col span="6" :offset="1" @click="top5btn(1)" :class="top5btns === 1 ? 'top5color' : ''">
              <van-icon name="bars" />
              <span>理论研究成果</span>
            </van-col>
          </van-row>
        </div>
        <div class="top2lion"></div>
        <van-skeleton   :row="5" :loading="top5loading">
        <div class="top6box">
          <div v-for="(i , x) in top5List" :key="x" class="top6List">
            <van-row>
              <van-col span="15"  class="top6Text" @click="godetail(i)">
                {{i.title}}
              </van-col>
              <van-col span="5"  :offset="4" class="top6date">
                {{i.pushDate}}
              </van-col>
            </van-row>
          </div>
        </div>
        </van-skeleton>
      </div>
    </div>
  </div>
</template>

<script>
import  ArticleItem  from './components/articleitem.vue'
import {commonSearchTopInnovate,getCaptureCover} from '@/api/synergyApi/indexApi'
export default {
  name: '',
  components: {ArticleItem},
  props: {},
  data() {
    return {
      top5btns:0,
      toploading:true, //占位符
      top2loading:true,//占位符
      top3loading:true,//占位符
      top5loading:true,//占位符
      value: '', // 搜索框vul
      navImgList: [
        {
          name: '中央精神',
          img: require('../../assets/nav-1.svg'),
          code:'ca101'
        },
        {
          name: '历史演进',
          img: require('../../assets/nav-2.svg'),
           code:'ca102'
        },
        {
          name: '国内动态',
          img: require('../../assets/nav-3.svg'),
           code:'ca103'
        },
        {
          name: '绵阳实践',
          img: require('../../assets/nav-4.svg'),
           code:'ca104'
        },
        {
          name: '国际视野',
          img: require('../../assets/nav-5.svg'),
           code:'ca105'
        },
      ],
      top1: [
        // {
        //   name: '习近平关于国家政治安全的重要论述探析',
        //   img: require('../../assets/topimg.png'),
        //   date: '2022-10-11',
        //   people: '李哥'
        // },
        // {
        //   name: '习近平关于国家政治安全的重要论述探析',
        //   img: require('../../assets/topimg.png'),
        //   date: '2022-10-11',
        //   people: '李哥'
        // },
      ],
      top2: [],
      top3: [],
      ImgList: [
        {
          name: '发展历程',
          img: require('../../assets/img-1.png'),
        },
        {
          name: '两弹一星精神',
          img: require('../../assets/img-2.png'),
        },
    ],
      smImgList: [
        {
          name: '方针政策',
          img: require('../../assets/20241206144344.png'),
        },
        {
          name: '绵阳经验',
          img: require('../../assets/smimg-3.png'),
        },
        {
          name: '理论研究',
          img: require('../../assets/smimg-2.png'),
        },
      ],
      top5List:[
        {
          name:'未竟的美国国家安全与军事战略转型略转型略转型',
          date:'2022-12-28',
        },
        {
          name:'未竟的美国国家安全与军事战略转型',
          date:'2022-01-03',
        },
        {
          name:'未竟的美国国家安全与军事战略转型',
          date:'2022-01-03',
        },
        {
          name:'未竟的美国国家安全与军事战略转型',
          date:'2022-01-03',
        },
        {
          name:'未竟的美国国家安全与军事战略转型',
          date:'2022-01-03',
        }

      ]
    }
  },
  computed: {},
  watch: {},
  created() {

    //中央精神
    // commonSearchTopInnovate(
    //     {
    //       "topNum": 2,
    //       "sortCode": "ca101",
    //       "orderByType": "发表时间",
    //       "orderByValue": "desc"
    //     }
    // )
    //     .then(res=>{
    //       console.log(res)
    //       if(res){
    //         this.toploading = false;
    //       }
    //       this.top1 = res.data.data
    //     })
   //历史演进
    commonSearchTopInnovate(
        {
          "topNum": 3,
          "sortCode": "ca1020101",
          "orderByType": "发表时间",
          "orderByValue": "desc"
        }
    )
        .then(res=>{
         // console.log(res)
          if(res){
            this.top2loading = false;
          }
          this.top2 = res.data.data
        })
    //国内动态
    commonSearchTopInnovate(
        {
          "topNum": 3,
          "sortCode": "ca1030101",
          "orderByType": "发表时间",
          "orderByValue": "desc"
        }
    )
        .then(res=>{
         // console.log(res)
          if(res){
            this.top3loading = false;
          }
          this.top3 = res.data.data
        })

    //国际视野
    commonSearchTopInnovate(
        {
          "topNum": 5,
          "sortCode": "ca10501",
          "orderByType": "发表时间",
          "orderByValue": "desc"
        }
    )
        .then(res=>{
        //  console.log("国际视野",res)
          if(res){
            this.top5loading = false;
          }
          this.top5List = res.data.data
        })
  },
  mounted() {
    this.getCaptureCover()
  },
  methods: {
    goMorn(x,y){
      this.$router.push(`/syncls/${x}/${y}`)
    },
          godetail(item){
     // console.log(item)
      this.$router.push({path:'/article',
              query:{'fileName':item.fileName,'dataSource':item.dataSource,'tableName':item.tableName,'sysId':item.sysId}})
    },

    tosearch(){
      this.$router.push('synersearch')
    },
      //中央精神
      async getCaptureCover() {
      var data = await getCaptureCover('ca20101', 3)
      if (data.data.data) {
         this.toploading = false;
        this.top1 = data.data.data
       // console.log('图片新闻', this.top1)
      }
    },
    top5btn(x){
     if(x === 0){
       this.top5btns = 0
       //国际视野
       commonSearchTopInnovate(
           {
             "topNum": 5,
             "sortCode": "ca10501",
             "orderByType": "发表时间",
             "orderByValue": "desc"
           }
       )
           .then(res=>{
            // console.log(res)
             if(res){
               this.top5loading = false;
             }
             this.top5List = res.data.data
           })
     }else {
       this.top5btns = 1
       //国际视野
       commonSearchTopInnovate(
           {
             "topNum": 5,
             "sortCode": "ca10502",
             "orderByType": "发表时间",
             "orderByValue": "desc"
           }
       )
           .then(res=>{
            // console.log(res)
             if(res){
               this.top5loading = false;
             }
             this.top5List = res.data.data
           })
     }
    }

  }
}

</script>
<style lang='less' scoped>
.biueTopTitle {
  width: 100%;
  height: 1.173rem;
  background-color: #0083bd;
  font-size: 0.453rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #ffffff;
  line-height: 1.173rem;
  text-align: center;
}

.input-vul {
  width: 9.36rem;
  //height: 0.8rem;
  background-color: #ffffff;
  border-radius: 0.053rem;
  margin: 0.293rem 0.32rem;
}

.nav-list {
  width: 100%;
  height: 2.453rem;
  background-color: #ffffff;
  //line-height: 2.453rem;
}

.imglist {
  width: 1.093rem;
  height: 1.093rem;

  //border-radius: 0.547rem;
}

.navImgList-flex {
  display: flex;
  width: 95%;
  justify-content: space-around;
  margin: 0 0.25rem;
  align-items: center;
}

.navImgList-flex > div {
  margin: 0.4rem auto;
  text-align: center;

}

.bgcol {
  background-color: #ffffff;
  margin-top: 0.29rem;
  // height: 7.667rem;
}

.bgcol1 {
  background-color: #ffffff;
  margin-top: 0.29rem;
  //height: 7.667rem;
}

.box {
  margin: 0 0.3rem;
}

.smTitle {
  display: flex;
  align-items: center;
  padding: 0.5rem 0;
}

.blueLion {
  width: 0.187rem;
  height: 0.587rem;
  background-color: #0083bd;
}

.smTitleText {
  width: 1.9rem;
  height: 0.44rem;
  font-family: PingFang-SC-Bold;
  font-size: 0.44rem;
  font-weight: bolder;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #000000;
  line-height: 0.44rem;
  margin-left: 0.24rem;
}

.smTitleTextBlue {
  width: 0.7rem;
  height: 0.44rem;
  font-family: PingFang-SC-Light;
  font-size: 0.32rem;
  font-weight: bolder;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #00628d;
  line-height: 0.44rem;
  margin-left: 6rem;
}

.top1Box-flex {
  display: flex;
  justify-content: space-between;
  margin: 0.38rem 0;
}

.top1img-box {
  width: 3.2rem;
  height: 2.4rem;
  background-color: #9f1ee6;
  border-radius: 0.107rem;
}

.top1img-box > img {
  width: 3.2rem;
  height: 2.4rem;
}

.top1title-text {
  margin-left: 2px;
  // width: 5.573rem;
  height: 1.5rem;
  font-family: PingFang-SC-Regular;
  font-size: 0.373rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #000000;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.top1smtext {
  font-family: PingFang-SC-Regular;
  font-size: 0.28rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #000000;
  opacity: 0.76;
  margin-top: 2px;
    margin-left: 2px;
}

.top2Box-flex {
  //display: flex;
  //justify-content: space-between;
  margin: 0.38rem 0;
}

.top2title-text {
  // width: 9.4rem;
  // height: 1rem;
  font-family: PingFang-SC-Regular;
  font-size: 0.373rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #000000;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; // 2行
}

.top2smtext {
  font-family: PingFang-SC-Regular;
  font-size: 0.28rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #000000;
  opacity: 0.76;
  margin-top: 0.5rem;
}

.top2lion {
  //width: 9.4rem;
  //height: 0.033rem;
  border: solid 1px #3a3a3a;
  opacity: 0.17;
  background-color: #3a3a3a;
  margin-top: 0.2rem;
}

.imgList-flex {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.4rem;
}
.ImgList{
  width: 4.52rem;
  height: 2.9rem;
  background-color: #027db4;
  border-radius: 0.053rem;
}
.ImgListbox{
  width: 100%;
  height: 0.613rem;
  background-color: #000000;
  border-radius: 0rem 0rem 0.053rem 0.053rem;
  opacity: 0.4;
  color: white;
  text-align: center;
  line-height: 0.613rem;
  position: relative;
  top: -0.64rem;
  //z-index: 99;
}
.smImgList{
  width: 4.52rem;
  height: 1.733rem;
  background-color: #027db4;
  border-radius: 0.053rem;
}
.top5color{
  color: #027db4;
}
.top6Text{
  //width: 6.5rem;
  height: 0.5rem;
  font-family: PingFang-SC-Regular;
  font-size: 0.373rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #000000;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.top6date{
  //width: 1.8rem;
  height: 0.253rem;
  font-family: PingFang-SC-Regular;
  font-size: 0.32rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #000000;
  opacity: 0.76;
}
.top6List{
  margin: 0.3rem 0;
}
.top6box{
  padding: 0.3rem 0 ;
}
</style>